<template name="swiperTabHead">
	<view class="center-cut-menu">
		<scroll-view scroll-x="true" scroll-with-animation="true" class="scroll-view" :scroll-left="scrollLeft">
			<view class="scroll-item" v-for="(item, index) in tabBars" :key="index" @click="changeMenu(index)">
				<text class="item-text" :class="tabIndex == index? 'active' : ''">{{item.name}}</text>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		name: "swiperTabHead",
		data() {
			return {
				contentScrollW: 0, // 导航区宽度
				scrollLeft: 0, // 横向滚动条位置
			};
		},
		mounted() {
			// 获取标题区域宽度，和每个子元素节点的宽度
			this.getScrollW()
		},
		props: {
			tabBars: Array, //数据集合
			tabIndex: Number // 当前选中
		},
		methods: {
			// 获取标题区域宽度，和每个子元素节点的宽度以及元素距离左边栏的距离
			getScrollW() {
				let query = uni.createSelectorQuery().in(this);
				query.select('.scroll-view').boundingClientRect(data => {
					// 拿到 scroll-view 组件宽度
					this.contentScrollW = data.width
				}).exec();

				query.selectAll('.scroll-item').boundingClientRect(data => {
					let dataLen = data.length;
					for (let i = 0; i < dataLen; i++) {
						//  scroll-view 子元素组件距离左边栏的距离
						this.tabBars[i].left = data[i].left;
						//  scroll-view 子元素组件宽度
						this.tabBars[i].width = data[i].width
					}
				}).exec()
			},

			// 选择标题
			changeMenu(index) {
				var _this = this
				// 效果一(当前点击子元素靠左展示)  局限性：子元素宽度相同
				// _this.scrollLeft = index * _this.tabBars[index].width

				// 效果一(当前点击子元素靠左展示)  子元素宽度不相同也可实现
				// _this.scrollLeft = 0;
				// for (let i = 0; i < index; i++) {
				//     _this.scrollLeft += _this.tabBars[i].width
				// };


				// 效果二(当前点击子元素靠左留一展示)  局限性：子元素宽度相同
				// _this.scrollLeft = (index - 1)  * _this.tabBars[index].width

				// 效果二(当前点击子元素靠左留一展示)  子元素宽度不相同也可实现
				// _this.scrollLeft = 0;
				// for (let i = 0; i < index - 1; i++) {
				//     _this.scrollLeft += _this.tabBars[i].width
				// };

				// 效果三(当前点击子元素居中展示)  不受子元素宽度影响
				_this.scrollLeft = _this.tabBars[index].left - _this.contentScrollW / 2 + _this.tabBars[index].width / 2;
				_this.$emit("tabtap", index)

			}
		},
		watch: {
			tabIndex(value) {
				this.changeMenu(value)
			}
		}

	}
</script>

<style lang="scss">
	scroll-view ::-webkit-scrollbar {
		display: none;
	}

	.center-cut-menu {
		width: 100%;
		height: 100rpx;
		box-sizing: border-box;

		.scroll-view {
			height: 140rpx;
			white-space: nowrap;

			.scroll-item {
				height: 140rpx;
				padding: 0 20rpx;
				display: inline-block;
				text-align: center;

				.item-text {
					font-size: 30rpx;
					line-height: 140rpx;
					padding-bottom: 10rpx;

					&.active {
						color: #1468FF;
						border-bottom: 5rpx solid #1468FF;
					}
				}
			}
		}
	}
</style>